<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">-->
    <title>绩效考核管理系统·员工登陆</title>
    <link rel="stylesheet" href="staticA/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="staticA/css/login.css" media="all"/>


    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>


    <style>
        /* 覆盖原框架样式 */
        .layui-elem-quote{background-color: inherit!important;}
        .layui-input, .layui-select, .layui-textarea{background-color: inherit; padding-left: 30px;}
    </style>
    <!-- Jquery Js -->
    <script type="text/javascript" src="staticA/js/jquery.min.js"></script>
    <!-- Layui Js-->
    <script type="text/javascript" src="staticA/layui/layui.js"></script>
    <!-- Jqarticle Js -->
    <script type="text/javascript" src="staticA/assembly/jqarticle/jparticle.min.js"></script>
    <!-- ZylVerificationCode Js-->
    <script type="text/javascript" src="staticA/assembly/zylVerificationCode/zylVerificationCode.js"></script>

    <script type="text/javascript" src="static/js/basic.js"></script>
    <script type="text/javascript" src="static/js/three.js"></script>

</head>
<body>
<!-- Head -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md12 zyl_mar_01">
            <blockquote class="layui-elem-quote">绩效考核管理系统登陆界面</blockquote>
        </div>
    </div>
</div>
<!-- Head End -->

<!-- Carousel -->
<div class="layui-row">
    <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin">
            <div carousel-item="">
                <div>
                    <div class="zyl_login_cont"></div>
                </div>
                <div>
                    <img src="staticA/img/carousel/01.jpg" />
                </div>
                <div>
                    <div class="background">
                        <span></span><span></span><span></span>
                        <span></span><span></span><span></span>
                        <span></span><span></span><span></span>
                        <span></span><span></span><span></span>
                    </div>
                </div>
                <div>
                    <img src="staticA/img/carousel/03.jpg" />
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Carousel End -->

<!-- Footer -->
<div class="layui-row">
    <div class="layui-col-sm12 layui-col-md12 zyl_center zyl_mar_01">
        © 2022 - 绩效管理系统登陆界面 || 绩效管理系统登陆界面版权所有
    </div>
</div>
<!-- Footer End -->



<!-- LoginForm -->
<div class="zyl_lofo_main">
    <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
        <legend>欢迎登陆 - 绩效考核管理平台</legend>
    </fieldset>
    <div class="layui-row layui-col-space15">
        <form class="layui-form zyl_pad_01" action="">
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-form-item">
                    <!--<input type="text" name="userName" autocomplete="off" placeholder="账号" class="layui-input">-->
                    <input type="text" name="userName" lay-verify="required|userName" autocomplete="off" placeholder="账号" class="layui-input">
                    <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-form-item">
                    <input type="password" name="password" autocomplete="off" placeholder="密码" class="layui-input">
                    <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
                </div>
            </div>

            <div class="layui-col-sm12 layui-col-md12">

                <div class="layui-row">
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                        <div class="layui-form-item">
                            <input type="text" name="identifyingcode" id="identifyingcode" lay-verify="required|identifyingcode" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
                            <i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                        <div class="zyl_lofo_vercode">
                            <a href="javascript:void(0);" onclick="VerificationCode();">
                                <img id="captchaImage" src="changeCode.do" style="height: 48px;width: 120px;"/>
                            </a>
                        </div>

                    </div>
                </div>
                <!--
                <div class="layui-row">
                    <div class="proving-code">
                        <input id="identifyingcode" class="form-control" name="identifyingcode" placeholder="验证码" type="text" >
                    </div>
                    <div class="code-img">
                        <a href="javascript:void(0);" onclick="VerificationCode();">
                            <img id="captchaImage" src="changeCode.do" style="height: 48px;width: 120px;"/>
                        </a>
                    </div>
                </div>
                -->
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">立即登录</button>
            </div>
        </form>
    </div>
</div>
<!-- LoginForm End -->
<script type="text/javascript">
    document.writeln("<div class=\"snow\" style=\"height:1200px;position:fixed; left:0px; top:0px; right:0px; bottom:0px; pointer-events: none;z-index: 9999;\"><canvas width=\"1904\" height=\"913\" style=\"position: absolute;left: 0;top: 0;\"></canvas></div>");
    // 更换验证码
    function VerificationCode() {
        $("#captchaImage").attr("src", "changeCode.do?timestamp=" + (new Date()).valueOf());
    }
</script>
<script>
    layui.use(['carousel', 'form', 'layedit', 'laydate'], function(){
        var carousel = layui.carousel
            ,form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //自定义验证规则
        form.verify({
            userName: function(value){
                if(value.length < 4){
                    return '账号至少得4个字符';
                }
            }
            ,pass: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格']
            /**
            ,vercodes: function(value){
                //获取验证码
                var zylVerCode = $(".zylVerCode").html();
                if(value!=zylVerCode){
                    return '验证码错误（区分大小写）';
                }
            }**/
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            /**
            layer.alert(JSON.stringify(data.field),{
                title: '最终的提交信息'
            })
            return false;
             **/
            //console.log("login="+JSON.stringify(JSON.stringify(data.field)));

            var username = data.field.userName;
            var password = data.field.password;
            var identifyingcode = data.field.identifyingcode;
            console.log("username="+JSON.stringify(username));
            console.log("password="+JSON.stringify(password));
            console.log("identifyingcode="+JSON.stringify(identifyingcode));

            alert("username=="+JSON.stringify(JSON.stringify(data.field)));
            alert("password=="+password);
            alert("identifyingcode=="+identifyingcode);

            if (username == ""){
                layer.msg("工号不能为空1", {time: 5000, icon:5,anim: 6})
                $("#username").face()
                return false;
            }
            if (password == ""){
                layer.msg("密码不能为空1", {time: 5000, icon:5,anim: 6})
                $("#password").face()
                return false;
            }
            if (identifyingcode == ""){
                layer.msg("验证码不能为空1", {time: 5000, icon:5,anim: 6})
                $("#identifyingcode").face()
                return false;
            }

            //这是使用ajax的方式提交
            $.ajax({
                type: 'post',
                url: 'employeeLogin.do',
                data: {
                    'username': username,
                    'password': password,
                    'identifyingcode': identifyingcode,
                },
                dataType: 'json',
                success: function (result) {
                    alert("result.code==="+result.code);
                    if(result.code==100){
                        layer.msg("登陆成功，正在跳转……")
                        //return '登陆成功，正在跳转……'
                        window.location.href ="loginSuccess.do";
                    }else{
                        alert("result.message==="+result.message);
                        //layer.msg(result.message);
                        //layer.msg(result.message, { icon: $.modal.icon(modal_status.SUCCESS), time: 5000, shift: 5 },function () { });
                        alert("aaaaa");
                        return result.message;
                    }
                }
            });
        });


        //设置轮播主体高度
        var zyl_login_height = $(window).height()/1.3;
        var zyl_car_height = $(".zyl_login_height").css("cssText","height:" + zyl_login_height + "px!important");


        //Login轮播主体
        carousel.render({
            elem: '#zyllogin'//指向容器选择器
            ,width: '100%' //设置容器宽度
            ,height:'zyl_car_height'
            ,arrow: 'always' //始终显示箭头
            ,anim: 'fade' //切换动画方式
            ,autoplay: true //是否自动切换false true
            ,arrow: 'hover' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
            ,indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
            ,interval: '5000' //自动切换时间:单位：ms（毫秒）
        });

        //监听轮播--案例暂未使用
        carousel.on('change(zyllogin)', function(obj){
            var loginCarousel = obj.index;
        });

        //粒子线条
        $(".zyl_login_cont").jParticle({
            background: "rgba(0,0,0,0)",//背景颜色
            color: "#fff",//粒子和连线的颜色
            particlesNumber:100,//粒子数量
            //disableLinks:true,//禁止粒子间连线
            //disableMouse:true,//禁止粒子间连线(鼠标)
            particle: {
                minSize: 1,//最小粒子
                maxSize: 3,//最大粒子
                speed: 30,//粒子的动画速度
            }
        });

    });

</script>
</body>
</html>
